<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="70px" class="formClass">
      <el-form-item label="宠物昵称" prop="petName">
        <el-input
          v-model="queryParams.petName"
          placeholder="请输入宠物昵称"
          clearable
          size="small"
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="领养人" prop="applicantName">
        <el-input
          v-model="queryParams.applicantName"
          placeholder="请输入领养人姓名"
          clearable
          size="small"
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="送养人" prop="createUserName">
        <el-input
          v-model="queryParams.createUserName"
          placeholder="请输入送养人姓名"
          clearable
          size="small"
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请日期" prop="createTime">
        <el-date-picker clearable size="small"
                        v-model="queryParams.createTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        style="width: 200px"
                        @keyup.enter.native="handleQuery">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div v-show="showSearch">
      <el-divider></el-divider>
    </div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['adopt:pet:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" @change="changeHeight"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="applyList" :height="tableHeight">
      <el-table-column label="操作" align="center" min-width="150px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.createUserId===currentUserId && scope.row.status!=='apply'"
            type="text"
            plain
            icon="el-icon-cherry"
            size="mini"
            @click="auditRecord(scope.row)"
            v-hasPermi="['adopt:pet:edit']"
          >审核记录</el-button>
          <el-button
            v-if="scope.row.createUserId===currentUserId && scope.row.status==='apply'"
            type="text"
            plain
            icon="el-icon-cherry"
            size="mini"
            @click="getDetail(scope.row)"
            v-hasPermi="['adopt:pet:edit']"
          >审核</el-button>
          <el-button
            v-if="scope.row.applicantId===currentUserId"
            type="text"
            plain
            icon="el-icon-cherry"
            size="mini"
            @click="onlyShowDetail(scope.row)"
            v-hasPermi="['adopt:pet:edit']"
          >详情</el-button>
          <el-button
            v-if="scope.row.applicantId===currentUserId && scope.row.status==='E'"
            type="text"
            plain
            icon="el-icon-cherry"
            size="mini"
            @click="toEditSituation(scope.row.petId)"
            v-hasPermi="['adopt:pet:edit']"
          >填写宠物近况</el-button>
          <el-button
            v-if="scope.row.createUserId===currentUserId && scope.row.status==='E'"
            type="text"
            plain
            icon="el-icon-cherry"
            size="mini"
            @click="toShowSituation(scope.row.petId)"
            v-hasPermi="['adopt:pet:edit']"
          >宠物近况</el-button>
        </template>
      </el-table-column>
      <el-table-column label="宠物昵称" :show-overflow-tooltip="true" min-width="110px" align="center" prop="petName" />
      <el-table-column label="照片" align="center" prop="petPhoto" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.petPhoto" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="申请人" :show-overflow-tooltip="true" min-width="110px" align="center" prop="applicantName"/>
      <el-table-column label="申请日期" align="center" prop="applyTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.applyTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="送养人" :show-overflow-tooltip="true" min-width="110px" align="center" prop="createUserName"/>
      <el-table-column label="状态" :show-overflow-tooltip="true" min-width="110px" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.adopt_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="[12,24,36,48]"
      @pagination="getList"
    />

    <!-- 领养宠物对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" class="dialog_slide"  append-to-body>
      <div class="item_style" style="margin-top: -10px">
        <el-row>
          <el-col>
            <h3>一、宠物信息</h3>
          </el-col>
        </el-row>
        <el-descriptions style="margin-left: 30px;margin-top: -20px">
          <el-descriptions-item label="宠物昵称">
            {{petForm.petName}}
          </el-descriptions-item>
          <el-descriptions-item label="性别" content-class-name="desc_content">
            {{petForm.petSex}}
          </el-descriptions-item>
          <el-descriptions-item label="年龄">
            {{petForm.petAge}}
          </el-descriptions-item>
          <el-descriptions-item label="毛色">
            {{petForm.hairColor}}
          </el-descriptions-item>
          <el-descriptions-item label="性格">
            {{petForm.petCharacter}}
          </el-descriptions-item>
          <el-descriptions-item label="品种" content-class-name="desc_content">
            {{petForm.petKind}}
          </el-descriptions-item>
          <el-descriptions-item label="价格">
            {{petForm.petPrice}}
          </el-descriptions-item>
          <el-descriptions-item label="来源" content-class-name="desc_content">
            {{petForm.petSource}}
          </el-descriptions-item>
          <el-descriptions-item label="健康状况">
            {{petForm.petHealth}}
          </el-descriptions-item>
          <el-descriptions-item label="免疫情况" content-class-name="desc_content">
            {{petForm.immuneCondition}}
          </el-descriptions-item>
          <el-descriptions-item label="绝育情况">
            {{petForm.sterilizationSituation}}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">
            {{petForm.petContact}}
          </el-descriptions-item>
          <el-descriptions-item label="补充信息" content-class-name="long_desc_content">
            {{petForm.petSupplement}}
          </el-descriptions-item>
          <el-descriptions-item label="地址" content-class-name="long_desc_content">
            {{petForm.petAddress}}
          </el-descriptions-item>
          <el-row>
            <el-descriptions-item label="照片" style="margin-left: -20px">
              <div style="width: 650px;margin-top: 5px">
                <div style="width: 160px;float:left" v-for="photo in petForm.petPhoto">
                  <image-preview :src="photo" :width="150" :height="150"/>
                </div>
              </div>
            </el-descriptions-item>
          </el-row>
        </el-descriptions>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="petForm">
        <div class="item_style">
          <el-row>
            <el-col>
              <h3>二、个人信息</h3>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="宠物昵称" prop="petName">
                {{form.applicantName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="applicantContact">
                {{form.applicantContact}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="补充说明" prop="supplyment">
              {{form.supplyment}}
            </el-form-item>
          </el-row>
        </div>
        <div class="item_style">
          <el-row>
            <el-col>
              <h3>三、领养问卷</h3>
            </el-col>
          </el-row>
          <el-form label-position="top" style="margin: 1px 20px 1px 35px" label-width="80px" :model="form">
            <el-form-item label="1.你可以接受每月为TA花多少钱？" prop="firstQuestion">
              {{form.firstQuestion}}
            </el-form-item>
            <el-form-item label="2.如果TA生病了需要耗费大量金钱，你愿意尝试治疗TA吗？" prop="secondQuestion">
              {{form.secondQuestion}}
            </el-form-item>
            <el-form-item label="3.确定跟室友或家人达成一致了吗？" prop="thirdQuestion">
              {{form.thirdQuestion}}
            </el-form-item>
            <el-form-item label="4.如果未来决定要孩子，你嫌弃TA吗？" prop="forthQuestion">
              {{form.forthQuestion}}
            </el-form-item>
            <el-form-item label="5.你愿意为了保护TA给家里安上纱窗吗？" prop="fifthQuestion">
              {{form.fifthQuestion}}
            </el-form-item>
            <el-form-item label="6.如果有一天实在不能继续养了，你有能力好好安置TA吗？" prop="sixthQuestion">
              {{form.sixthQuestion}}
            </el-form-item>
            <el-form-item label="7.如果跟家里的原住民不和，你可以解决吗？" prop="seventhQuestion">
              {{form.seventhQuestion}}
            </el-form-item>
            <el-form-item label="8.如果它在晚上发出声响影响你休息，你能忍受吗？" prop="eighthQuestion">
              {{form.eighthQuestion}}
            </el-form-item>
            <el-form-item label="9.如果它在家里乱尿或者挠坏家具，你能耐心教育吗？" prop="ninthQuestion">
              {{form.ninthQuestion}}
            </el-form-item>
            <el-form-item label="10.你有时间陪伴TA吗？" prop="tenQuestion">
              {{form.tenQuestion}}
            </el-form-item>
          </el-form>
        </div>
<!--        <el-form-item label="审核意见" v-if="showAuditItem" prop="petName">-->
<!--          <el-input v-model="form.status" v-if="showAudit" placeholder="审核意见" />-->
<!--          <el-input v-model="form.status" v-else placeholder="审核意见"  disabled/>-->
<!--        </el-form-item>-->
        <el-form-item label="审核意见" v-if="showAuditItem" prop="status">
          <el-radio-group v-model="form.status">
<!--            <el-radio-->
<!--              v-for="dict in dict.type.animal_sex"-->
<!--              :key="dict.value"-->
<!--              :label="dict.value"-->
<!--            >{{dict.label}}</el-radio>-->
            <el-radio label="E" key="E">同意</el-radio>
            <el-radio label="T" key="T">不同意</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-bottom: 20px;margin-right: 20px">
        <el-button type="primary" @click="submitAudit">提交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getPet, updatePet} from "@/api/adopt/pet";
import {getRecord, listRecord, updateRecord} from "@/api/adopt/record";

export default {
  name: "Pet",
  dicts: ['sys_yes_no', 'animal_sex','adopt_status'],
  data() {
    return {
      currentUserId:this.$store.state.user.id,
      tableHeight:320,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      showAudit:true,
      showAuditItem:true,
      //默认不显示
      isExpandAll: false,
      // 总条数
      total: 0,
      applyList:[],
      // 弹出层标题
      title: "审核",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams:{
        pageNum: 1,
        pageSize: 12,
        currentUserId:this.$store.state.user.id,
        isDelete:"0",
        isAdopted:null,
      },
      // 表单参数
      form: {},
      petForm:{},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  // 表格高度自适应
  mounted () {
    this.$nextTick(function () {
      this.getHeight();
    })
    window.addEventListener('resize',this.getHeight,false)
  },
  methods: {
    /** 展开/折叠操作 */
    searchAll() {
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(function () {
        this.getHeight();
      })
    },
    changeHeight(){
      this.$nextTick(function () {
        this.getHeight();
      })
    },
    getHeight(){
      //listView
      const _this=this;
      let height1=document.defaultView.getComputedStyle(_this.$el, null)["padding-top"];
      height1=height1.replace("px","");
      let height2=document.getElementsByClassName("el-table")[0].offsetTop;
      _this.tableHeight=document.documentElement.clientHeight-height2-height1-150+"px";
    },
    /** 查询列表 */
    getList(){
      this.loading=true;
      listRecord(this.queryParams).then(response => {
        this.applyList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    async submitAudit(){
      let status=this.form.status;
      let petId=this.petForm.petId;
      await updateRecord(this.form).then(res=>{})
      if(status==='E'){
        this.reset();
        this.petForm.petId=petId;
        this.petForm.isAdopted='1';
        this.petForm.petPhoto=null;
        await updatePet(this.petForm).then(res=>{})
      }
      this.$modal.msgSuccess("提交成功");
      this.open = false;
      this.getList();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.showAudit=true;
      this.showAuditItem=true;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        petId: null,
        petName: null,
        petSex: "不确定",
        petAge: null,
        petCharacter: null,
        petKind: null,
        petSupplement: null,
        petSell: "0",
        petPrice: null,
        petPhoto: null,
        petAddress: null,
        petContact: null,
        petSource: null,
        petNumber: null
      };
      this.petForm={
        petPhoto:""
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 详情按钮操作 */
    async getDetail(item) {
      this.reset();
      const petId = item.petId;
      await getPet(petId).then(response => {
        this.petForm = response.data;
        this.petForm.petPhoto=this.petForm.petPhoto.split(',');
      });
      await getRecord(item.applyRecordId).then(res=>{
        this.form=res.data;
        this.open = true;
      })
    },
    auditRecord(item){
      this.showAudit=false;
      this.title = "审核记录";
      this.getDetail(item);
    },
    onlyShowDetail(item){
      this.showAuditItem=false;
      this.title = "详情";
      this.getDetail(item);
    },
    toEditSituation(id){
      this.$router.push({
        path:'/editSituation',
        query:{petId:id}
      });
    },
    toShowSituation(id){
      this.$router.push({
        path:'/showSituation',
        query:{petId:id}
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('adopt/pet/export', {
        ...this.queryParams
      }, `pet_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>
.item_style {
  border: 1px dashed #bdbdbd;
  margin-bottom: 10px;
  padding: 0 10px 0 10px;
}
.desc_content{
  margin-left: 20px;
  background: #E1F3D8;
}
.long_desc_content{
  display: block;
  background: #E1F3D8;
}
.el-divider--horizontal {
  margin: 5px 0 14px;
  background: 0 0;
  border-top: 1px solid #e8eaec;
}
//对话框高度过长时 设置对话框上下滑动
.content_slide {
  display: flex;
  overflow: hidden;
  .my_content {
    position: absolute;
    top:40px;
    bottom: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 1;
    overflow: hidden;
    overflow-y: auto;
  }
}
.pet_title_class {
  font-size: 14px;
  color: rgb(105,101,101);
}
.desc_carg {
  font-size: 13px;
  color: #999;
  word-wrap: break-word;
}
</style>
